<template>
	<section>
		<headers txt="我的团队" ></headers>
		<div class="teamAll">
			<!--<p class="myteam">我的团队</p>-->
			<div class="myteam_one">
				<div class="teamOne" :data-id="listTeam[0].Members_ID" v-if="num>=1">
					<p class="temp1">
						<span>{{ listTeam[0].Members_Name }}</span> 
					</p>
					<p class="temp1">
						<span>{{ listTeam[0].Members_Phone }}</span> 
					</p>
					<p class="temp1">
						<span><span>推荐人数:</span>{{ listTeam[0].Intro_Count }}</span> 
					</p> 
				</div>
				<div class="teamOne" :data-id="listTeam[0].Members_ID" v-else>
					<p class="temp1"><span>姓名: </span> <span>Tel: </span></p>
					<p class="temp2">
						<span>推荐人总数</span>
						<span>0</span>
					</p>
				</div>
			</div> 
			<!--2级-->
			<p class="teamxian">
				<figure class="l_h0  figimg">
					<img src="../../assets/asset/team_xian1.png"/> 
				</figure>
					
			</p>
			<div class="myteam_two">
				<div class="teamTwo" :data-id="listTeam[1].Members_ID" v-if="num>=2"> 
					<p class="temp1">
						<span>{{ listTeam[1].Members_Name }}</span>
					</p>
					<p class="temp1"> 
						<span>{{listTeam[1].Members_Phone}}</span>
					</p>
					<p class="temp1">
						 <span>推荐人数:{{ listTeam[1].Intro_Count }}</span>
					</p> 
				</div>
				<div class="teamTwo" :data-id="listTeam[2].Members_ID" v-else> 
					<p class="temp1"><span>姓名:</span> <span>Tel:</span></p>
					<p class="temp2">
						<span>推荐人总数</span>
						<span>0</span>
					</p>
				</div>
				<div class="teamTwo" :data-id="listTeam[1].Members_ID" v-if="num>=2"> 
					<p class="temp1">
						<span>{{ listTeam[2].Members_Name }}</span>
					</p>
					<p class="temp1"> 
						<span>{{listTeam[2].Members_Phone}}</span>
					</p>
					<p class="temp1">
						 <span>推荐人数:{{ listTeam[2].Intro_Count }}</span>
					</p> 
				</div>
				<div class="teamTwo" :data-id="listTeam[2].Members_ID" v-else> 
					<p class="temp1"><span>姓名:</span> <span>Tel:</span></p>
					<p class="temp2">
						<span>推荐人总数</span>
						<span>0</span>
					</p>
				</div>
			</div>
			<p class="teamxian_two"><img src="../../assets/asset/team_xian2.png"/><img src="../../assets/asset/team_xian2.png"/></p>
			<!--3级-->
			<div class="myteam_three"> 
				<div class="teamthree" :data-id="listTeam[3].Members_ID" v-if="num>=4">
					<p class="temp1">{{ listTeam[3].Members_Name }}</p>
					<p class="temp4">{{listTeam[3].Members_Phone}}</p>
					<p class="temp3">推荐人数:{{ listTeam[3].Intro_Count}}</p> 
				</div>
				<div class="teamthree" v-else>
					<p class="temp1">姓名:</p>
					<p class="temp2">推荐人总数</p>
					<p class="temp3">0</p>
					<p class="temp4">Tel:</p>
				</div>
				<div class="teamthree" :data-id="listTeam[4].Members_ID" v-if="num>=5">
					<p class="temp1">{{ listTeam[4].Members_Name }}</p>
					<p class="temp4">{{listTeam[4].Members_Phone}}</p>
					<p class="temp3">推荐人数:{{ listTeam[4].Intro_Count}}</p> 
				</div>
				<div class="teamthree" v-else>
					<p class="temp1">姓名:</p>
					<p class="temp2">推荐人总数</p>
					<p class="temp3">0</p>
					<p class="temp4">Tel:</p>
				</div>
				<div class="teamthree" :data-id="listTeam[5].Members_ID" v-if="num>=6">
					<p class="temp1">{{ listTeam[5].Members_Name }}</p>
					<p class="temp4">{{listTeam[5].Members_Phone}}</p>
					<p class="temp3">推荐人数:{{ listTeam[5].Intro_Count}}</p> 
				</div>
				<div class="teamthree" v-else>
					<p class="temp1">姓名:</p>
					<p class="temp2">推荐人总数</p>
					<p class="temp3">0</p>
					<p class="temp4">Tel:</p>
				</div>
				<div class="teamthree" :data-id="listTeam[6].Members_ID" v-if="num>=7">
					<p class="temp1">{{ listTeam[6].Members_Name }}</p>
					<p class="temp4">{{listTeam[6].Members_Phone}}</p>
					<p class="temp3">推荐人数:{{ listTeam[6].Intro_Count}}</p> 
				</div>
				<div class="teamthree" v-else>
					<p class="temp1">姓名:</p>
					<p class="temp2">推荐人总数</p>
					<p class="temp3">0</p>
					<p class="temp4">Tel:</p>
				</div>
			</div>
		</div>
	</section>
</template>

<script>
	import { Toast } from 'mint-ui';
	import { Indicator } from 'mint-ui';
	export default{
		name:'team',
		data(){
			return{
				listTeam:[{},{},{},{},{},{},{}],
				num:'',
				MyMembersID:''
				
			}
		},
		created:function(){
			this.GetMembersTeam();	
		},
		methods:{
			GetMembersTeam:function(){ 
				Indicator.open(); 
				if(this.$route.query.MembersID){
					this.MyMembersID=this.$route.query.MembersID;
				}else{
					this.MyMembersID=sessionStorage.MembersID;
				}
			this.$http.get('/WorkMembers/V1.0/GetMembersTeam',{
					params:{
						MembersID:this.MyMembersID
					}
			}).then((res)=>{
				if(!res.data.Return_ID){
					let datas = res.data.Return_Data;
					this.listTeam.forEach(function (item,ix,arr) {
						
						 if(datas[ix]){
						 	arr[ix]=datas[ix];
						 }else{
						 	item={};
						 }
					  
					})
					this.num=this.listTeam.length;
					Indicator.close();
				}else{
					Toast(res.data.Return_Mess)
					Indicator.close();
				}
			}).catch((err)=>{
				Toast(err);
			})
			
			}
		}
	}
	
	
</script>

<style scoped>
	.teamAll{
		height:92vh;
		padding:0.9333333333rem 0.3333333333rem;
		/*align-content: space-between;*/
		background: url(../../assets/asset/team_backg.png) no-repeat;
		display: flex;
		flex-direction: column;
		
	}
	 .myteam{
	 	color: #fff;
	 	font-size: 0.8rem;
	 	width: 100%;
	 	text-align: center;
	 	margin-bottom: 0.8rem;
	 }
	 .myteam_one{
	 	width:100%;
	 	display: flex;
	 	justify-content:center;
	 	flex:1;
	 } 
	 .teamOne{
		width:70%;
		background-color: #fff;
		border-radius:0.1333333333rem;
		padding: 0.4rem 0.5333333333rem; 
		display: flex;
		flex-direction: column;
		background: url(../../assets/asset/asserts2.png) no-repeat;
		background-size: 100% 100%;
		color: #fff;
	}
	.teamOne .temp1{
		font-size: 0.4rem;
		/*color: #333;*/
		display: flex;
		justify-content: space-around;
		flex: 1; 
		text-align: center;
	}
	.teamOne .temp2 span{
			display: block;
			text-align: center;
			font-size: 0.32rem;
			color: #999;
	}
	.teamOne .temp2 span:last-child{
		color: #333;
		font-size:0.8533333333rem;
	}
	.myteam_two{
		width: 100%;
		display: flex;
		justify-content: space-between;
		flex:1;
		/*margin: 1.7333333333rem 0;*/
	}
	.teamTwo{
		width: 48%;
		padding:0.24rem 0.2rem;
		border-radius:0.1333333333rem;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		background: url(../../assets/asset/asserts2.png) no-repeat;
		background-size: 100% 100%;
		color: #fff;
	}
	
	.teamTwo .temp1{
		font-size: 0.4rem;
		/*color: #333;*/
		display: flex;
		justify-content: space-around;
		flex: 1;
	}
	.teamTwo .temp2 span{
		display: block;
		text-align: center;
		font-size:0.2133333333rem;
		color: #999;
	}
	.teamTwo .temp2 span:last-child{
		color: #333;
		font-size:0.5333333333rem;
	}
	
	.myteam_three{
		width: 100%;
		background-color: #fff;
		border-radius:0.1333333333rem;
		display: flex;
		flex:1;
		
	}
	.teamthree{
	  width: 25%;
	 /* height: 2.6666666666rem;*/
	  padding:0.2666666666rem 0.1333333333rem;
	  border-right:1px dashed #ccc;
	  display: flex;
	  flex-flow: wrap;
	  flex-direction: column;
	  text-align: center;
	  background: url(../../assets/asset/asserts2.png) no-repeat;
	  background-size: 100% 100%;
	}
	
	.teamthree p{
		width: 100%;
		font-size: 0.3466666666rem;
		color: #fff;
		display: flex;
		flex: 1;
		justify-content: center;
		text-align: center;
	} 
	.teamthree:last-child{
		border-right: none;
	}
	.teamxian{
		width: 100%;
		height:auto;
		text-align: center;
	}
	.teamxian img{
		width:50%;
		height: 100%;
		line-height:0;
		margin: 0;
		padding: 0;
	}
	.teamxian_two{
		width: 100%;
		height:auto;
		display: flex;
		justify-content: space-around; 
		text-align: center;
	}
	.teamxian_two img{
		width:25%;
		height: 100%;
	}
	.teamVh{
		height:8vh;
	}
	.figimg{
		text-align: center;
	}
	.figimg img{
		width:50%;
		height:2rem;
	}
</style>